<template>
    <div class="app-container material-category" v-loading="loading">
        <h3 class="title">分类管理
            <el-button type="primary" size="small" @click="onAddFirst" v-hasPermi="['oms:category:add']">新增一级分类
            </el-button>
        </h3>
        <el-collapse v-if="materialCategory.length">
            <el-collapse-item v-for="item in materialCategory">
                <div class="collapse-title" slot="title">
                    <div class="left">
                        <el-image v-if="item.icon" :src="item.icon" @error="item.icon = null" />
                       <i v-else class="el-icon-folder-opened" />
                        {{ item.categoryName }}
                    </div>
                    <div class="right">
                        <el-button type="text" size="small" @click.stop="onAdd(item)" v-hasPermi="['oms:category:add']">
                            新增二级分类
                        </el-button>
                        <el-button type="text" class="success" size="small" @click.stop="onEdit(item)"
                            v-hasPermi="['oms:category:edit']">编辑
                        </el-button>
                        <el-button type="text" class="danger" size="small" @click.stop="handleDelete(item)"
                            v-hasPermi="['oms:category:remove']">删除
                        </el-button>
                    </div>
                </div>
                <div class="sub-item" v-for="sub in item.children" v-show="item.children && item.children.length">
                    <div class="left">
                        <el-image v-if="sub.icon" :src="sub.icon" @error="sub.icon = null" />
                        <i v-else class="el-icon-document-remove" />
                        {{ sub.categoryName }}
                    </div>
                    <div class="right">
                        <el-button type="text" class="success" size="small" @click.stop="onEdit(sub)"
                            v-hasPermi="['oms:category:edit']">编辑
                        </el-button>
                        <el-button type="text" class="danger" size="small" @click.stop="handleDelete(sub)"
                            v-hasPermi="['oms:category:remove']">删除
                        </el-button>
                    </div>
                </div>
                <div class="empty-tip" v-show="!item.children || !item.children.length">
                    暂无子类
                </div>
            </el-collapse-item>
        </el-collapse>
        <div class="empty-tip" v-else>暂无分类</div>

        <!--新增编辑-->
        <!--新增编辑弹窗-->
        <add-edit v-if="showAddEdit" :visible.sync="showAddEdit" :type="handleType" :data="currentItem"
            :parent-id="parentId" @success="getCategory" />

    </div>
</template>

<script>
    import {
        responseEnum
    } from "../../../const/const";
    import {
        getCategoryList,
        materialCategoryDelete
    } from "./api";
    import AddEdit from "./addEdit"

    export default {
        name: 'Category',
        components: {
            AddEdit
        },
        data() {
            return {
                loading: true,
                materialCategory: [],
                showAddEdit: false,
                handleType: null,
                currentItem: '',
                parentId: null
            }
        },
        mounted() {
            this.getCategory();
        },
        methods: {
            /**
             * 查询分类
             */
            getCategory() {
                getCategoryList().then(res => {
                    if (res.code === responseEnum.success) {
                        this.materialCategory = res.rows || [];
                    }
                }).finally(() => this.loading = false)
            },
            /**
             * 新增弹窗
             */
            onAdd(row) {
                const path = row.categoryId ? '/material/category/add2' : '/material/category/add';
                this.$router.push({
                    path,
                    query: {
                        categoryId: row.categoryId
                    }
                });
            },
            onAddFirst() {
                this.$router.push({
                    path: '/material/category/add'
                });
            },
            /**
             * 编辑弹窗
             */
            onEdit(row) {
                this.$router.push({
                    path: '/material/category/edit',
                    query: {
                        data: JSON.stringify(row)
                    }
                })
            },
            /**
             * 删除
             */
            handleDelete(item) {
                this.$modal.confirm('删除后无法复原，确认删除吗？').then(() => {
                    if(item.categoryName=='成品'||item.categoryName=='半成品'||item.categoryName=='原材料'){
                        this.$message.error("该分类不能删除哦~");
                        return;
                    }
                    materialCategoryDelete(item.categoryId).then(res => {
                        if (res.code === responseEnum.success) {
                            this.getCategory();
                            this.$message.success("删除成功");
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                });
            },

            onClose() {
                this.form = this.$options.data().form;
                this.showAddEdit = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .material-category {
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0;
            line-height: 1;
            position: relative;
            padding-left: 10px;
            font-weight: bold;
            font-size: 16px;

            &:before {
                display: block;
                content: '';
                width: 4px;
                height: 50%;
                background: #1890ff;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        }

        .el-collapse {
            border-left: 1px solid #e6ebf5;
            border-right: 1px solid #e6ebf5;

            .el-image,
            i[class*="el-icon-"] {
                width: 25px;
                height: 25px;
                margin-right: 10px;
                font-size: 18px;
                line-height: 25px;
                text-align: center;
            }

            ::v-deep.el-collapse-item__header {
                padding-left: 25px;
                position: relative;

                &:hover {
                    background: #eee;
                }

                .el-collapse-item__arrow {
                    position: absolute;
                    left: 10px;
                }
            }

            .collapse-title,
            .sub-item {
                display: flex;
                flex: 1;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
            }

            .left,
            .right {
                display: flex;
                align-items: center;
            }

            .sub-item {
                margin-left: 65px;
                border-top: 1px solid #e6ebf5;
                padding: 5px 10px;

                &:hover {
                    background: #eee;
                }
            }

        }

        .empty-tip {
            text-align: center;
            font-size: 18px;
            color: #aaa;
        }
    }
</style>
